
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
 <style type="text/css">
  td{
    white-space:nowrap;
    overflow:hidden;
    word-break:keep-all;
   }

</style>
  
 <div class="card">
    <div class="card-header"><h4>系统用户管理</h4></div>
    <div class="card-body">
        <div class='row'>
          <div class="form-group col-sm-4">
            <input class="form-control" type="text" id="qy_user"  placeholder="用户名" >
          </div>

          <div class="form-group col-sm-4">
            <input class="form-control" type="text" id="qy_role"  placeholder="所属角色" >
          </div>

          <div class="form-group col-sm-4">
            <button class="btn btn-info btn-w-md" type="button" id='query_data'>查   询</button>
          </div>
   
        </div>
        <hr>

        <div class="row">
        
        <div class="col-sm-12">
          <div style="height:600px;overflow:auto">
            <table class ='table-striped' id="table"></table>
          </div>
        </div>

      </div>
  </div>
  </div>

 <script src="static/js/bootstrap-table.min.js"></script>
 <script src="static/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
$(function(){

    initTable();


     function initTable() {

              var t = $("#table").bootstrapTable({

              url: '/xt_user',
              method: 'get',
              dataType: "json",
              striped: true,//设置为 true 会有隔行变色效果
              undefinedText: "空",//当数据为 undefined 时显示的字符
              pagination: true, //分页
      //      paginationLoop:true,//设置为 true 启用分页条无限循环的功能。
      //      showToggle: "true",//是否显示 切换试图（table/card）按钮
      //      showColumns: "true",//是否显示 内容列下拉框
              pageNumber: 1,//如果设置了分页，首页页码
      //      showPaginationSwitch:true,//是否显示 数据条数选择框
              pageSize: 10,//如果设置了分页，页面数据条数
              pageList: [5, 10, 20, 40],  //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
              paginationPreText: '<<',//指定分页条中上一页按钮的图标或文字,这里是<
              paginationNextText: '>>',//指定分页条中下一页按钮的图标或文字,这里是>
      //      singleSelect: false,//设置True 将禁止多选
              search: true, //显示搜索框
              //data_local: "zh-US",//表格汉化
              sidePagination: "client", //服务端处理分页
              queryParams: queryParams,//将返回的值赋值给table插件的属性
              responseHandler:function(res){
                let html = '<option value="">无（一级菜单）</option>'
                for(let i=0;i < res.total;i++){
                  if(res.rows[i].sjgnmc == null){
                    html+='<option value='+res.rows[i].gn_id+'>'+res.rows[i].gnmc+'</option>'
                  }
                }
                $('#sjgn_id').html(html)
                  return{
                      "total":res.total,
                      "rows": res.rows,
                  }
              },
              idField: "manager_id",//指定主键列
              columns: [{
                          field:'manager_id',
                          title:'用户ID'
                      },{
                          field:'username',
                          title:'用户名'
                      },{
                          field:'pwd',
                          title:'密码'
                      },{
                          field:'xm',
                          title:'姓名',                
                      },{
                          field:'tel',
                          title:'电话'
                      },{
                          field:'yxbz',
                          title:'有效标志'
                      },{
                          field:'rolemc',
                          title:'角色',          
                      },{
                          title: '操作',          
                          align: 'center',
                          formatter: function (value, records, index) {
                            let html= ''
                              html = '<div class="nav nav-drawer">'+
                                     '<a href="javascript:void(0);" id ="btn$xt_user_add" class="btn btn-success btn-sm" >新增</a> '+
                                     '<a href="javascript:void(0);" id ="btn$xt_user_edit?uid='+records.manager_id+'"  class="btn btn-warning btn-sm" >修改</a> '+
                                     '<a href=javascript:user_delete(' +records.manager_id + ') class="btn btn-danger btn-sm" >删除</a> '+
                                     '</div>'
                              return html
                            }
                        }
                      ]
          });
      };


        //分页查询参数，是以键值对的形式设置的
        function queryParams(params) {
            params.username = $('#qy_user').val();// 请求时向服务端传递的参数
            params.rolemc =$('#qy_role').val();
            return  params
        }

        // 搜索按钮触发事件
        $("#query_data").click(function() {
              $('#table').bootstrapTable(('refresh')); // 很重要的一步，刷新url！
        });




  });
    //用户删除
     function user_delete(id){
         let r = confirm("确定要删除吗？")
         if (r == false){
            return
         }
        $.ajax({
                  //请求方式
            type : "get",
            //数据类型
            dataType: 'json',
            //请求地址
            url : "/xt_user_delete",
            //数据，json字符串
            data : {'manager_id':id},
            //请求成功
            success : function(rs) {
              alert(rs.mes)
              $('#table').bootstrapTable(('refresh'));
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                alert(e)
            }
        });

     }




</script>
